import { useEffect } from 'react'
import style from './category.module.css'
import { useNavigate } from 'react-router-dom'
import { saveIndexTagsAsync, tags } from '../../features/home/homeSlice'
import { useAppDispatch, useAppSelector } from '../../app/hooks'

export default function HomeCategory() {
  const dispatch = useAppDispatch()
  const tagList = useAppSelector(tags)
  const navigate = useNavigate()

  useEffect(() => {
    dispatch(saveIndexTagsAsync())
  }, [])

  // 点击每个分类处理的数据
  function categoryHandle(id: number) {
    console.log(id)
    navigate('/category', { state: { category: id } })
  }

  return (
    <div className={style['category-list']}>
      {tagList.map((c) => (
        <div className={style['category-item']} key={c.id} onClick={() => categoryHandle(c.id)}>
          <div className={style.icon}>
            <img className={style.pic} src={c.img} alt="" />
          </div>
          <div className={style.title}>{c.name}</div>
        </div>
      ))}
    </div>
  )
}
